<script>
import { ElMessage } from 'element-plus';
import dialog from '/@/mixins/dialog';
import PictureSelectorDialog from '/@/components/pictureSelector/PictureSelectorDialog.vue';
import { rules } from '../hook';
import { useApi, useSinglePic } from '/@/hooks';
import DatePicker from '/@/components/common/datePicker/DatePicker.vue';
import MySwitch from '/@/components/base/MySwitch.vue';
import DotList from '/@/components/common/DotList.vue';
import { arrHasData } from '/@/utils';
import PositionSelector from '/@/components/common/positionSelector/PositionSelector.vue';
import { useMarketingApi } from '/@/api/marketing';
export default {
	name: 'AddDialog',
	mixins: [dialog],
	emits: ['update:modelValue', 'refresh'],
	components: { PictureSelectorDialog, DatePicker, MySwitch, DotList, PositionSelector },
	props: {
		isAdd: {
			type: Boolean,
			default: false,
		},
		editItem: {
			type: Object,
			default: () => {
				return {};
			},
		},
	},
	setup(props, { emit }) {
		const { editAdPosition, getAdPositionById } = useMarketingApi();
		const getLoading = ref(false);
		const ruleForm = ref({ pagePosition: '首页白点广告位', whiteDotPicList: [] });
		const formRef = ref();
		const activeName = ref('0');
		const open = async () => {
			if (formRef.value) formRef.value.clearValidate();
			let res = await getAdPositionById(props.editItem.id);
			if (res.code !== 200) return;
			if (props.isAdd) return;
			ruleForm.value = res.data;
			if (!arrHasData(ruleForm.value.whiteDotPicList)) {
				ruleForm.value.whiteDotPicList = [
					{ picPositionId: 1, whiteDotList: [] },
					{ picPositionId: 2, whiteDotList: [] },
					{ picPositionId: 3, whiteDotList: [] },
					{ picPositionId: 4, whiteDotList: [] },
				];
			}
		};
		const dialogClosed = () => {};
		//验证白点列表必填项
		const validDotList = () => {
			let isValid = true;
			ruleForm.value.whiteDotPicList.some((item1, index1) => {
				if (!arrHasData(item1.whiteDotList)) {
					ElMessage.warning(`无法保存，图${item1.picPositionId}没有任何商品！`);
					isValid = false;
					return true;
				}
				return item1.whiteDotList.some((item2, index2) => {
					if (!item2.productId) {
						ElMessage.warning(`无法保存，左${index1 + 1}的第${index2 + 1}项没有选择商品！`);
						isValid = false;
						return true;
					}
				});
			});
			return isValid;
		};
		// const { loading, request } = useApi(editAdPosition);
		const loading = ref(false);
		const toSave = async () => {
			if (!validDotList()) return;
			loading.value = true;
			let res = await editAdPosition(ruleForm.value);
			if (res.code !== 200) return;
			loading.value = false;
			emit('update:modelValue', false);
			ElMessage.success('保存成功！');
			ruleForm.value = {};
			emit('refresh');
		};
		return {
			title: computed(() => (props.isAdd ? '新增' : '修改') + '白点广告位'),
			ruleForm,
			rules,
			loading,
			activeName,
			formRef,
			getLoading,
			open,
			dialogClosed,
			toSave,
			...useSinglePic(ruleForm),
		};
	},
};
</script>
<template>
	<div class="AddDialog">
		<el-dialog :close-on-click-modal="closeOnClickModal" :title="title" v-model="visible" width="800px" @open="open" @closed="dialogClosed">
			<div class="form_wrap" v-loading="getLoading">
				<el-form ref="formRef" :model="ruleForm" :rules="rules" label-width="120px">
					<el-form-item label="广告位置">
						<PositionSelector v-model="ruleForm.positionId" disabled />
					</el-form-item>
					<el-tabs v-model="activeName">
						<el-tab-pane :label="`图${item.picPositionId}`" :name="String(index)" v-for="(item, index) in ruleForm.whiteDotPicList" :key="index">
							<DotList v-model="ruleForm.whiteDotPicList[index]" />
						</el-tab-pane>
					</el-tabs>
					<el-form-item label="有效时间">
						<DatePicker
							v-model:start="ruleForm.startTime"
							v-model:end="ruleForm.endTime"
							type="datetimerange"
							start-placeholder="开始时间"
							end-placeholder="结束时间"
						/>
					</el-form-item>
					<el-form-item label="状态">
						<MySwitch v-model="ruleForm.status"> </MySwitch>
					</el-form-item>
				</el-form>
			</div>
			<template #footer>
				<span class="dialog-footer">
					<el-button @click="visible = false">取 消</el-button>
					<el-button type="primary" :loading="loading" @click="toSave">保 存</el-button>
				</span>
			</template>
		</el-dialog>
		<PictureSelectorDialog v-model="isShowPicSelector" :maxLength="1" @submit="getPic" />
	</div>
</template>

<style lang="scss" scoped></style>
